{% extends "base.html" %} {% block title %}首页 - SDRS{% endblock %} {% block
body_attr %} {% endblock %}{% block welcome %}你好{% if user_name %}，{{
user_name }}{% endif %}{% endblock %}{% block content %}

<!-- ======= Hero Section ======= -->
<section id="hero">
  <div class="hero-container">
    <div
      id="heroCarousel"
      class="carousel slide carousel-fade"
      data-ride="carousel"
    >
      <ol class="carousel-indicators" id="hero-carousel-indicators"></ol>

      <div class="carousel-inner" role="listbox">
        <!-- Slide 1 -->
        <div
          class="carousel-item active"
          style="background-image: url('static/image/slide/slide-1.jpg')"
        >
          <div class="carousel-container">
            <div class="carousel-content container">
              <h2 class="animated fadeInDown">
                欢迎来到 <span>我司官网</span>
              </h2>
              <p class="animated fadeInUp">
                玩太刀玩的公司，是一家专注于发掘数据信息，探索数据背后的潜力，实现数据最大价值的，立足于信息技术的科技公司。
              </p>
              <a
                href="#about"
                class="btn-get-started animated fadeInUp scrollto"
                >了解更多</a
              >
            </div>
          </div>
        </div>

        <!-- Slide 2 -->
        <div
          class="carousel-item"
          style="background-image: url('static/image/slide/slide-2.jpg')"
        >
          <div class="carousel-container">
            <div class="carousel-content container">
              <h2 class="animated fadeInDown">Steam数据分析平台（SDP）</h2>
              <p class="animated fadeInUp">
                Steam平台已成为全球最大的PC游戏分发平台之一。为帮助玩家高效发现优质游戏、辅助开发者洞察市场趋势，本项目采集Steam平台多维数据，构建可视化分析系统与智能推荐引擎，优化用户体验，提升平台商业价值。
              </p>
              <a href="#sdp" class="btn-get-started animated fadeInUp scrollto"
                >了解更多</a
              >
            </div>
          </div>
        </div>

        <!-- Slide 3 -->
        <div
          class="carousel-item"
          style="background-image: url('static/image/slide/slide-3.jpg')"
        >
          <div class="carousel-container">
            <div class="carousel-content container">
              <h2 class="animated fadeInDown">Steam游戏推荐系统（SRS）</h2>
              <p class="animated fadeInUp">
                一个基于海量Steam数据的游戏推荐系统，旨在为用户提供精准，有效，贴心的游戏内容推送，解决用户在寻找产品时信息渠道单一，主观，盲目等问题
              </p>
              <a href="#srs" class="btn-get-started animated fadeInUp scrollto"
                >了解更多</a
              >
            </div>
          </div>
        </div>
      </div>

      <a
        class="carousel-control-prev"
        href="#heroCarousel"
        role="button"
        data-slide="prev"
      >
        <span
          class="carousel-control-prev-icon icofont-rounded-left"
          aria-hidden="true"
        ></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="carousel-control-next"
        href="#heroCarousel"
        role="button"
        data-slide="next"
      >
        <span
          class="carousel-control-next-icon icofont-rounded-right"
          aria-hidden="true"
        ></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</section>
<!-- End Hero -->
<main id="main">
  <!-- ======= About Us Section ======= -->
  <section id="about" class="about">
    <div class="container">
      <div class="row no-gutters">
        <div class="col-lg-6 video-box">
          <img src="static/image/about.jpg" class="img-fluid" alt="" />

        </div>

        <div
          class="col-lg-6 d-flex flex-column justify-content-center about-content"
        >
          <div class="section-title">
            <h2>关于我们</h2>
            <p>
              玩太刀玩的公司，是一家专注于发掘数据信息，探索数据背后的潜力，实现数据最大价值的，立足于信息技术的科技公司。旗下拥有Steam数据分析平台（SDP）和Steam游戏推荐系统（SRS）两大和核心产品：
            </p>
          </div>
          <div class="section-title">
            <h2>关于SDRS</h2>
            <p>
              本项目SDRS，全称Steam Data & Recommendation System
              为帮助玩家高效发现优质游戏、辅助开发者洞察市场趋势，本项目拟通过采集Steam平台多维数据，构建可视化分析系统与智能推荐引擎，优化用户体验并提升平台商业价值。
            </p>
          </div>

          <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
            <div class="icon"><i class="icofont-database"></i></div>
            <h4 class="title">SDP</h4>
            <p class="description">
              全称Steam Data Platform：Steam数据分析平台
            </p>
          </div>

          <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
            <div class="icon"><i class="icofont-thumbs-up"></i></div>
            <h4 class="title">SRS</h4>
            <p class="description">
              全称Steam Recommendation System：Steam游戏推荐系统
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End About Us Section -->

  <!-- ======= Our Team Section 团队部分======= -->
  <section id="team" class="team">
    <div class="container">
      <div class="section-title">
        <h2>团队成员</h2>
        <p>玩太刀玩的技术有限公司核心员工</p>
      </div>

      <div class="row">
        <div
          class="col-xl-3 col-lg-4 col-md-6"
          data-aos="fade-up"
          data-aos-delay="300"
        >
          <div class="member">
            <div class="pic">
              <img
                src="static/image/team/team-1.jpg"
                class="img-fluid"
                alt="tk头像"
              />
            </div>
            <div class="member-info">
              <h4>涂恒睿</h4>
              <span>项目经理</span>
              <span>后端开发工程师</span>
              <div class="social">
                <!-- QQ -->
                <div class="icon-with-popup">
                  <i class="icofont-qq"></i>
                  <div class="popup">
                    <img
                      src="static/image/qrcode/qq-thr.png"
                      alt="thr的QQ二维码"
                    />
                  </div>
                </div>

                <!-- 微信 -->
                <div class="icon-with-popup">
                  <i class="icofont-wechat"></i>
                  <div class="popup">
                    <img
                      src="static/image/qrcode/wx-thr.png"
                      alt="tk的微信二维码"
                    />
                  </div>
                </div>

                <!-- 邮箱 -->
                <a href="mailto:1341800468@qq.com" class="icon-with-popup">
                 <i class="icofont-envelope"></i>
                 <div class="popup">1341800468@qq.com</div>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div
          class="col-xl-3 col-lg-4 col-md-6"
          data-aos="fade-up"
          data-aos-delay="300"
        >
          <div class="member">
            <div class="pic">
              <img
                src="static/image/team/team-2.jpg"
                class="img-fluid"
                alt="tk头像"
              />
            </div>
            <div class="member-info">
              <h4>田科</h4>
              <span>前端工程师</span>
              <span>测试人员、界面设计员</span>

              <div class="social">
                <!-- QQ -->
                <div class="icon-with-popup">
                  <i class="icofont-qq"></i>
                  <div class="popup">
                    <img
                      src="static/image/qrcode/qq-tk.png"
                      alt="tk的QQ二维码"
                    />
                  </div>
                </div>

                <!-- 微信 -->
                <div class="icon-with-popup">
                  <i class="icofont-wechat"></i>
                  <div class="popup">
                    <img
                      src="static/image/qrcode/wx-tk.png"
                      alt="tk的微信二维码"
                    />
                  </div>
                </div>

                <!-- 邮箱 -->
                <a href="mailto:2832190426@qq.com" class="icon-with-popup">
                 <i class="icofont-envelope"></i>
                 <div class="popup">2832190426@qq.com</div>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div
          class="col-xl-3 col-lg-4 col-md-6"
          data-aos="fade-up"
          data-aos-delay="300"
        >
          <div class="member">
            <div class="pic">
              <img
                src="static/image/team/team-3.jpg"
                class="img-fluid"
                alt="zhr头像"
              />
            </div>
            <div class="member-info">
              <h4>张皓然</h4>
              <span>全栈工程师</span>
              <span>系统设计工程师</span>

              <div class="social">
                <!-- QQ -->
                <div class="icon-with-popup">
                  <i class="icofont-qq"></i>
                  <div class="popup">
                    <img
                      src="static/image/qrcode/qq-zhr.png"
                      alt="zhr的QQ二维码"
                    />
                  </div>
                </div>

                <!-- 微信 -->
                <div class="icon-with-popup">
                  <i class="icofont-wechat"></i>
                  <div class="popup">
                    <img
                      src="static/image/qrcode/wx-zhr.png"
                      alt="tk的微信二维码"
                    />
                  </div>
                </div>

                <!-- 邮箱 -->
                <a href="mailto:kurotake@foxmail.com" class="icon-with-popup">
                 <i class="icofont-envelope"></i>
                 <div class="popup">kurotake@foxmail.com</div>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div
          class="col-xl-3 col-lg-4 col-md-6"
          data-aos="fade-up"
          data-aos-delay="300"
        >
          <div class="member">
            <div class="pic">
              <img
                src="static/image/team/team-4.jpg"
                class="img-fluid"
                alt="zx头像"
              />
            </div>
            <div class="member-info">
              <h4>张鑫</h4>
              <span>需求分析工程师</span>
              <span>架构师、测试人员</span>

              <div class="social">
                <!-- QQ -->
                <div class="icon-with-popup">
                  <i class="icofont-qq"></i>
                  <div class="popup">
                    <img
                      src="static/image/qrcode/qq-zx.png"
                      alt="zx的QQ二维码"
                    />
                  </div>
                </div>

                <!-- 微信 -->
                <div class="icon-with-popup">
                  <i class="icofont-wechat"></i>
                  <div class="popup">
                    <img
                      src="static/image/qrcode/wx-zx.png"
                      alt="zx的微信二维码"
                    />
                  </div>
                </div>

                <!-- 邮箱 -->
                <a href="mailto:zx@example.com" class="icon-with-popup">
                 <i class="icofont-envelope"></i>
                 <div class="popup">zx@example.com</div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Our Team Section -->
  <!-- ======= sdp Section sdp部分======= -->
  <section id="sdp" class="sdp">
    <div class="container">
      <div class="section-title">
        <h2>Steam数据分析平台SDP</h2>
        <p>
          随着数字游戏市场的迅猛发展，Steam平台已成为全球最大的PC游戏分发平台之一，海量游戏数据蕴含巨大的商业价值。为帮助玩家高效发现优质游戏、辅助开发者洞察市场趋势，本项目拟通过采集Steam平台多维数据，构建可视化分析系统与智能推荐引擎，优化用户体验并提升平台商业价值。
        </p>
      </div>

      <div class="row">
        <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
          <div class="icon"><i class="icofont-pie-chart"></i></div>
          <h4 class="title">平台分布</h4>
          <p class="description">
              收集steam游戏支持的平台，可视化展示steam游戏支持的平台分布图
          </p>
        </div>
        <div
          class="col-lg-4 col-md-6 icon-box"
          data-aos="fade-up"
          data-aos-delay="100"
        >
          <div class="icon"><i class="icofont-chart-bar-graph"></i></div>
          <h4 class="title">游戏热度分布</h4>
          <p class="description">
              根据steam每年发布游戏的评论数，可视化展示每年的游戏讨论热度
          </p>
        </div>
        <div
          class="col-lg-4 col-md-6 icon-box"
          data-aos="fade-up"
          data-aos-delay="200"
        >
          <div class="icon"><i class="icofont-chart-histogram-alt"></i></div>
          <h4 class="title">发布趋势</h4>
          <p class="description">
              整合海量游戏的发布时间，展示steam游戏年度发布趋势走势图
          </p>
        </div>
      </div>
    </div>
  </section>
  <!-- End sdp Section -->
   <!-- ======= sdp Section sdp部分======= -->
  <section id="srs" class="sdp">
    <div class="container">
      <div class="section-title">
        <h2>Steam游戏推荐系统SRS</h2>
        <p>
          一个基于海量Steam数据的游戏推荐系统，旨在为用户提供精准，有效，贴心的游戏内容推送，解决用户在寻找产品时信息渠道单一，主观，盲目等问题。
        </p>
      </div>

      <div class="row">

        <div
          class="col-lg-4 col-md-6 icon-box"
          data-aos="fade-up"
          data-aos-delay="300"
        >
          <div class="icon"><i class="icofont-image"></i></div>
          <h4 class="title">封面展示</h4>
          <p class="description">
              简洁，美观地展示推荐游戏的封面图片以及详细信息
          </p>
        </div>
        <div
          class="col-lg-4 col-md-6 icon-box"
          data-aos="fade-up"
          data-aos-delay="400"
        >
          <div class="icon"><i class="icofont-settings"></i></div>
          <h4 class="title">定制化偏好设置</h4>
          <p class="description">
              根据选择的偏好，精准为你推送你可能喜欢的游戏
          </p>
        </div>
        <div
          class="col-lg-4 col-md-6 icon-box"
          data-aos="fade-up"
          data-aos-delay="500"
        >
          <div class="icon"><i class="icofont-loop"></i></div>
          <h4 class="title">刷新推荐内容</h4>
          <p class="description">
            不满意？那就换一换！通过算法为你提供不同的推荐内容
          </p>
        </div>
      </div>
    </div>
  </section>
  <!-- End sdp Section -->

</main>
<!-- End Main -->
{% endblock %}
